<template>
  <div class="roadsideCompletedOrder-page">
    <div class="table-container">
      <OrderDetails :orderDetails="list.data" />
    </div>
    <div class="table-container">
      <TransactionDetails :orderDetails="list.data" />
    </div>
    <div class="table-container">
      <FeeRules :orderDetails="list.data" />
    </div>
    <div class="table-container">
      <PaymentDetails :orderDetails="list.data" />
    </div>
    <!-- <div class="table-container">
      <TollCollector />
    </div> -->
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import OrderDetails from "./orderDetails.vue";
import TransactionDetails from "./transactionDetails.vue";
import FeeRules from "./feeRules.vue";
import PaymentDetails from "./paymentDetails.vue";
import TollCollector from "./tollCollector.vue";
import { getCompletedOrdersDetails } from "../request.js";
import { useRoute } from "vue-router";
const route = useRoute();

const list = reactive({
  data: {},
});
const getData = async () => {
  await getCompletedOrdersDetails(route.query.id).then((res) => {
    console.log("res ===>", res);
    list.data = res.data.result;

    document.title = list.data.section + list.data.berthCode + " - " + list.data.licensePlate;
  });
};

getData();
</script>

<style lang="less" scoped>
.roadsideCompletedOrder-page {
  padding: 24px;
  background: var(--main-bg-color);
}
.table-container {
  margin-top: 16px;
  min-height: 100%;
  padding: 24px;
  background: #fff;
  border-radius: 6px;
}
</style>